<template>
    <div class="goods-info">
        <transition 
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <div class="ball" ref="ball" v-show="ballFlag"></div>
        </transition>

        <!-- 商品轮播区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbolist="swiperlist" :isfull="true"></swiper>
                </div>
            </div>
        </div>

        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品的名称标题</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价： <del>￥2399</del>&nbsp;&nbsp;销售价: <span class="now-price">￥2199</span>
                    </p>
                    <p style="display:inline-block">购买数量</p>
                    <!-- 这放置加减数量组件 -->
                    <!-- 通过属性绑定的方式给子组件传值 -->
                    <numbox @getcount="getSelectedCount" :max="quantity"></numbox>

                    <p class="mt-button">
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" v-on:click="addToshopCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
		</div>

        <!-- 商品参数区域 -->
        <div class="mui-card">
             <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:</p>
                    <p>库存情况:</p>
                    <p>上架时间:</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
		</div>
    </div>
</template>

<script>
import swiper from '../subcomponents/lunbotu.vue'
import mui from '../../lib/mui/js/mui.js'
import numbox from '../subcomponents/numbox.vue'

export default {
    data() {
        return {
            swiperlist: [
                {image:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/33893/35/7263/398072/5cc15d47E447d852b/f43f6980b6f1715a.jpg!cr_1125x549_0_72!q70.jpg.dpg', url:'789'}, 
                {image:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/23112/33/6431/99212/5c540d7fEf8000223/fddb6b047c02ba3d.jpg!cr_1125x549_0_72!q70.jpg.dpg', url:'111'}
            ],
            id: '1212',
            'ballFlag': false,
            bedgeNub: 1,
            quantity: 60
        }
    },
    components: {
        swiper,
        numbox
    },
    mounted(){
        mui('.mui-numbox').numbox();
    },
    methods: {
        goDesc(id){
            // 这是两种方式实现编程式导航
            // this.$router.push({ path: '/home/goodsdesc/' + id });
            this.$router.push({ name: 'goodsdesc', params: { id } });
        },
        goComment(id){
            this.$router.push('/home/goodscomment/' + id);
        },
        addToshopCar(){
            this.ballFlag = true;
        },
        getSelectedCount(data){
            this.bedgeNub = data;
        },
        beforeEnter(el){
            el.style.transform = "translate(0, 0)";
            console.log('beforeEnter' + '--' + this.ballFlag);
        },
        enter(el, done){
            el.offsetwidth;

            const ballPosition = this.$refs.ball.getBoundingClientRect();
            const badgePostion = document.getElementById('badge').getBoundingClientRect();

            const xDist = badgePostion.left - ballPosition.left;
            const yDist = badgePostion.top - ballPosition.top;


            el.style.transform = `translate(${xDist}px, ${ yDist }px)` //"translate(80px, 230px)";
            el.style.transition = 'all 1s cubic-bezier(.4, -0.3, 1, .68)';
            // done();
            var ball = this.ballFlag;
            setTimeout(() => {
                this.ballFlag = false;
                // document.getElementById('badge').innerText = ++this.bedgeNub;
                document.getElementById('badge').innerText = this.bedgeNub;
                console.log('afterEnter' +'--' + this.ballFlag);
            }, 900);
            
        },
        afterEnter(el){
            this.ballFlag = false;
            
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-info{
    position: relative;
}
.mui-card-content .mui-card-content-inner{
   padding: 10px 15px;
   .mt-button{
        margin-top: 10px;
   }
}
.goods-info{
    background-color: #eee;
    overflow: hidden;
}
.mui-card-content-inner {
    position: relative;
    padding: 0;
}
.now-price{
    color: red;
    font-size: 16px;
    font-weight: bold;
}
.mui-card-footer{
    // 因为父控件使用了flex布局，所以要设置为block就可以占一行
    display: block;
    .mint-button{
        margin: 15px 0;
    }
}

.ball{
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: red;
    top: 327px;
    left: 138px;
    z-index: 100;
    border-radius: 50%;
}
</style>
